<template>
  <view class="w-full h-[44rpx] px-[32rpx] box-border flex items-center justify-between">
    <view class="relative">
      <view class="text-[#1A202C] text-32rpx font-bold title relative z-10">{{ title }}</view>
      <image
        src="/static/star.png"
        class="w-[36rpx] h-[36rpx] absolute right-[-40rpx] top-[-10rpx]"
      ></image>
    </view>
    <view class="h-full flex items-center cursor-pointer" @click="enterToFather">
      <text class="text-[26rpx] leading-[44rpx] text-[#1a202c]">更多</text>
      <text class="icon-[uiw--right] text-[26rpx]"></text>
    </view>
  </view>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: "标题"
  }
})
const emits = defineEmits(["toNavigate"])
const enterToFather = () => {
  emits("toNavigate")
}
</script>

<style lang="scss" scoped>
.title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4rpx;
  width: 100%;
  height: 14rpx;
  background-color: #b3e757;
  z-index: -1;
}
</style>
